<template>
  <el-dialog
    @close="closePreDiagEvent"
    title="题目预览"
    :visible.sync="PreviewShow"
    :before-close="closePreDiagEvent"
    width="47%"
  >
    <div class="card">
      <el-row>
        <el-col :span="6"
          >【题型】：{{ getquestionType(this.form.questionType) }}</el-col
        >
        <el-col :span="6">【编号】：{{ this.form.id }}</el-col>
        <el-col :span="6"
          >【难度】：{{ getdifficulty(this.form.difficulty) }}</el-col
        >
        <el-col :span="6">【标签】：{{ this.form.tags }}</el-col>
      </el-row>
      <el-row class="second-row">
        <el-col :span="6">【学科】：{{ this.form.subject }}</el-col>
        <el-col :span="6">【目录】：{{ this.form.catalog }}</el-col>
        <el-col :span="6">【方向】：{{ this.form.direction }}</el-col>
        <el-col :span="6"></el-col>
      </el-row>
      <!-- 分割线 -->
      <el-divider></el-divider>
      <el-row>
        <el-col :span="6">【题干】：</el-col>
      </el-row>
      <!-- 题目 -->
      <el-row>
        <el-col :span="12"
          ><span v-html="this.form.question" v-highlight></span
        ></el-col>
      </el-row>
      <el-row
        v-if="this.form.questionType === '1' || this.form.questionType === '2'"
      >
        <el-col :span="12"
          ><span
            >{{ getquestionType(this.form.questionType) + "题" }}&nbsp;
            选项：（以下选中的选项为正确答案）</span
          ></el-col
        >
      </el-row>
      <!-- 单选 -->
      <div v-if="this.form.questionType === '1'">
        <el-radio-group :value="1">
          <el-row v-for="obj in options" :key="obj.id" class="rowRadio">
            <el-col :span="24">
              <el-radio :label="obj.isRight">{{ obj.title }}</el-radio></el-col
            >
          </el-row>
        </el-radio-group>
      </div>
      <!-- 多选 -->
      <div v-if="this.form.questionType === '2'">
        <el-checkbox-group :value="[1]">
          <el-row v-for="obj in options" :key="obj.id" class="rowRadio">
            <el-col :span="24">
              <el-checkbox :label="obj.isRight">{{
                obj.title
              }}</el-checkbox></el-col
            >
          </el-row>
        </el-checkbox-group>
      </div>
      <!-- 简答 -->
      <div v-if="this.form.questionType === '3'"></div>

      <!-- 分割线 -->
      <el-divider></el-divider>
      <el-row>
        <el-col :span="12"
          >【参考答案】：<el-button
            type="danger"
            size="small"
            @click="videoShowFn"
            >视频答案预览</el-button
          ></el-col
        >
      </el-row>
      <!-- 视频标签 -->
      <video
        width="400"
        height="300"
        v-if="videoShow"
        :src="form.videoURL"
        controls="controls"
      >
        <!-- <source :src="form.videoURL" type="video/mp4"> -->
      </video>

      <!-- 分割线 -->
      <el-divider></el-divider>

      <el-row>
        <el-col :span="6"
          >【答案解析】：<span v-html="this.form.answer"></span
        ></el-col>
      </el-row>
      <!-- 分割线 -->
      <el-divider></el-divider>
      <el-row>
        <el-col :span="6"
          >【题目备注】：<span>{{ this.form.remarks }}</span></el-col
        >
      </el-row>
      <el-button type="primary" class="closeBtn" @click="closeBtn"
        >关闭</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import { detail } from '@/api/hmmm/questions'
export default {
  name: 'PreviewDiag',
  props: {
    PreviewShow: {
      type: Boolean
    },
    form: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      difficulty: [
        {
          value: 1,
          text: '简单'
        },
        {
          value: 2,
          text: '一般'
        },
        {
          value: 3,
          text: '困难'
        }
      ],
      questionType: [
        {
          value: 1,
          text: '单选'
        },
        {
          value: 2,
          text: '多选'
        },
        {
          value: 3,
          text: '简答'
        }
      ],
      options: [],
      videoShow: false // 是否显示视频
    }
  },
  created () {
    // 调用获取题的选项方法
    this.detail()
  },
  methods: {
    // 弹窗每次关闭后的执行
    closePreDiagEvent () {
      this.$emit('closePewDiag')
    },

    // 关闭弹窗
    closeBtn () {
      this.$emit('closePewDiag')
    },

    // 展示视频标签
    videoShowFn () {
      this.videoShow = true
    },

    // 获取题的选项
    detail () {
      this.$nextTick(async () => {
        const res = await detail({ id: this.form.id })
        this.options = res.data.options
        // console.log(this.options)
      })
    },

    getdifficulty (value) {
      const newObj = this.difficulty.find((obj) => obj.value === Number(value))
      return newObj.text
    },
    getquestionType (value) {
      const newObj = this.questionType.find(
        (obj) => obj.value === Number(value)
      )
      return newObj.text
    }
  }
}
</script>

<style scoped>
.el-icon-close {
  color: #fff;
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 16px;
}
.closeBtn {
  margin-top: 20px;
  position: absolute;
  right: 20px;
}
.el-col-24 {
  margin-top: 20px;
}
.el-divider--horizontal {
  margin-bottom: 10px;
  margin-top: 16px;
}
.card {
  padding-top: 10px;
  padding-bottom: 60px;
}
.second-row {
  margin-top: 20px;
}
.el-divider {
  background-color: #9a9a9a;
}
p {
  display: inline-block;
}
</style>
